import { useEffect } from "react";
import styles from "./index.less";
import { Button, Flex } from "antd";
import { motion, useAnimationControls, useAnimate } from "motion/react";
import SubView from "./SubView";

export default () => {
    const control1 = useAnimationControls();
    const control2 = useAnimationControls();
    const control3 = useAnimationControls();

    const [scope, animate] = useAnimate();
    const [scope2, animate2] = useAnimate();

    return (
        <div className={styles.container}>
            <div className={styles.card}>
                <p>单个动画</p>

                <Button
                    onClick={() => {
                        control1.start({ rotate: 360, scale: 1.3, transition: { duration: 2 } });
                    }}
                >开始动画</Button>

                <motion.div
                    className={styles.motionView}
                    animate={control1}
                >
                    M
                </motion.div>
            </div>

            <div className={styles.card}>
                <p>序列动画</p>

                <Button
                    onClick={async () => {
                        await control2.start({ rotate: 360, scale: 1.3, transition: { type: 'Inertia', duration: 2 } });
                        await new Promise(resolve => setTimeout(resolve, 300));
                        await control2.start({ rotate: 0, scale: 1, transition: { duration: 1, ease: 'backOut' } });
                    }}
                >开始动画</Button>

                <motion.div
                    className={styles.motionView}
                    animate={control2}
                >
                    M
                </motion.div>
            </div>

            <div className={styles.card}>
                <p>结合Variants</p>

                <Button
                    onClick={async () => {
                        await control3.start('anim1');
                        await new Promise(resolve => setTimeout(resolve, 300));
                        await control3.start('anim2');
                    }}
                >开始动画</Button>

                <motion.div
                    className={styles.motionView}
                    animate={control3}
                    variants={{
                        anim1: { rotate: 360, scale: 1.3, transition: { duration: 2 } },
                        anim2: { rotate: 0, scale: 1, transition: { duration: 1, ease: 'backOut' } },
                    }}
                >
                    M
                </motion.div>
            </div>

            <div className={styles.card}>
                <p>useAnimate非侵入式</p>

                <Button
                    onClick={async () => {
                        await animate(scope.current, { rotate: 360, scale: 1.3 }, { duration: 2 });
                        await new Promise(resolve => setTimeout(resolve, 300));
                        await animate(scope.current, { rotate: 0, scale: 1 }, { duration: 1, ease: 'backOut' });
                    }}
                >开始动画</Button>

                <div
                    ref={scope}
                    className={styles.motionView}
                >
                    M
                </div>
            </div>

            <div className={styles.card}>
                <p>useAnimate支持选择器</p>

                <Button
                    onClick={async () => {
                        await animate2("#customView", { scale: 1.3, rotate: 180, backgroundColor: '#1876ff' }, { duration: 1, ease: 'backOut' });
                        await new Promise(resolve => setTimeout(resolve, 300));
                        await animate2("#customView", { scale: 1, rotate: 0, backgroundColor: '#ff6919' }, { duration: 0.5, ease: 'backOut'});
                    }}
                >开始动画</Button>

                <div
                    ref={scope2}
                >
                    <div
                        id="customView"
                        className={styles.motionView}
                    >
                        M
                    </div>
                </div>
            </div>

            <div className={styles.card2}>
                <p>useAnimate结合useInView</p>

                <div className={styles.inViewLayout}>
                    <SubView text="M1" />
                    <SubView text="M2" />
                    <SubView text="M3" />
                    <SubView text="M4" />
                    <SubView text="M5" />
                    <SubView text="M6" />
                    <SubView text="M7" />
                    <SubView text="M8" />
                </div>
            </div>
        </div>
    );
};
